<template>
    <div @click="galleryShow=!galleryShow">
    <!-- 小技巧：
         @click 并不写在 banner-gallery 标签里面，而是写在其父标签里面！
         这样一来，gallery组件就无需调用 $emit() 函数了！
     -->
        <div class="banner">
            <img class="img" :src="this.galleryItems[2]" />
            <div class="info">
                <div class="title">☆☆☆别有洞天</div>
                <div class="number">
                    <span class="iconfont icon-tupian"></span>
                    39
                </div>
            </div>
        </div>
        <fade-gallery>
            <banner-gallery v-if="galleryShow" :items="galleryItems">
                <!-- 小技巧：
                     这里不能用 v-show="galleryShow"
                     因为它会导致 swiper 页码错误等BUG
                 -->
            </banner-gallery>
        </fade-gallery>
    </div>
</template>

<script>
    import BannerGallery from '@/common/gallery/Gallery'
    import FadeGallery from '@/common/transition/fade'
    export default {
        name: "Banner",
        components:{
            BannerGallery,
            FadeGallery
        },
        data(){
            return {
                galleryItems:[
                    'http://img1.qunarzz.com/sight/p0/1607/7c/7cda8b6782dabd80b4.img.jpg_r_800x800_d6a63068.jpg',
                    'http://img1.qunarzz.com/sight/p0/1711/81/81ed632012f27eeaa3.img.jpg_r_800x800_93f1a7af.jpg',
                    'http://img1.qunarzz.com/sight/p0/1704/d2/d2a029bded2f6b4aa3.img.jpg_r_800x800_d0d2c749.jpg',
                    'http://img1.qunarzz.com/sight/p0/1711/1e/1e5eaf5ac11a1dea3.img.jpg_r_800x800_e7892537.jpg',
                    'http://img1.qunarzz.com/sight/p0/1711/b6/b6dcb80ed40dedbfa3.img.jpg_r_800x800_fcce5c48.jpg',
                ],
                galleryShow:false
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import "~@styles/variables.styl"
    .banner
        background-color:black
        position:relative
        overflow:hidden
        width: 100%
        height:0
        padding-bottom:52%
        .img
            width:100%
        .info
            line-height: $lineHeight*.5
            color:white
            bottom:0
            left:0
            right:0
            position:absolute
            display:flex
            .title
                padding:.1rem
                float:left
                flex:1
                background-image:linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.8))
            .number
                padding:.1rem
                margin-right:.1rem
                background-color:rgba(0,0,0,.8)
                float:right
                width:1rem
                border-radius:.1rem
                text-align:center
</style>